<template>
	<qh-page-view :title="title">
		<view class="search flex-cn-cn">
			<input :value="keyword" :focus="isFocus" placeholder="请输入商品名称" placeholder-class="pl" maxlength="30" confirm-type="search" @input="inputSearch"
				@confirm="search"></input>
			<view @tap="search">搜索</view>
		</view>
		<view class="viewa flex-spb-cn">
			<view @tap="select(0)" :class="'viewa_inner ' + (cur==0?'cheak':'')">
				<text>综合</text>
			</view>
			<view @tap="select(1)" :class="'viewa_inner ' + (cur==1?'cheak':'')">
				<text>最新</text>
			</view>
			<view @tap="select(2)" :class="'viewa_inner ' + (cur==2?'cheak':'')">
				<qh-sort-check v-model="arrowDirection" @change="changeSort" size="20">价格</qh-sort-check>
			</view>
			<view @tap="select(3)" :class="'viewa_inner ' + (cur==3?'cheak':'')">
				<text>销量</text>
			</view>
		</view>
		<!-- 会员优惠券指定分类 -->
		<view class="viewa2" v-if="memProClass.length > 0">
			<view class="viewa2-list " :class="class_id==item.class_id ?'actived':''" v-for="(item, index) in memProClass" :key="index"
				@tap="checkClass(item.class_id)">
				<text>{{item.class_name}}</text>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="flex-column-100">
			<scroll-view class="scroll-view" :scroll-top="topNum" :scroll-y="isScroll" @scrolltolower="addMore" upper-threshold="1" lower-threshold="30">
				<view class="scroll-view-content flex-spb flex-wrap">
					<view class="viewc_inner meetReduceImgBox" v-for="(item, index) in goodsList" :key="index" @tap="details(item.id)">
						<image class="viewc_inner_a" mode="aspectFit" :src="item.goods_image"></image>
						<view v-if="item.goods_num<=0" class="goods-sell-empty">已售空</view>
						<view class="viewc_inner_b">{{item.goods_name}}</view>
						<view class="viewc_inner_c">
							<block v-if="item.promotion_status==1">
								<text class="isvip">￥{{item.act_price}}
									<block v-if="item.act_price<item.online_price">
										<text class="price_pass"><text class="pass">￥{{item.online_price}}</text></text>
									</block>
								</text>
							</block>
							<block v-else>
								<view class="isvip" v-if="showPlusPrice(item)">
									<text class="plus-price-color">￥{{item.plus_price}}</text>
									<text class="plus-price-icon">PLUS</text>
								</view>
								<view class="isvip" v-if="showVipPrice(item)">
									<text class="price-color">￥{{item.shop_mem_price}}</text>
									<text class="vip-price-icon">VIP</text>
								</view>
								<view class="isvip" v-if="showOnlinePrice(item)">￥{{item.online_price}}</view>
							</block>
							<view class="commission" v-if="item.disStoreProp">预估收益 <text style="color:#ff3d3d;">￥{{item.disStoreProp}}</text></view>
							<view>
								<text class="qh-rt-single qh-rt-a-zu4415 home-add-icon" @tap.stop="addToCar(index)"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="loading">
					<qh-loading v-if="showLoading" row value text="加载中" size="small"></qh-loading>
					<block v-else-if="canLoad&&goodsList.length">
						<text>下拉加载更多</text>
					</block>
				</view>
				<view class="kong" v-if="!showLoading && goodsList&&goodsList.length&&!canLoad">已显示全部</view>
				<view class="kong" v-if="goodsList.length == 0 ">{{msg}}</view>
			</scroll-view>

		</view>

		<!--规格组件 -->
		<block v-if="showSelectSku">
			<choose-sku :sku="sku" :goodsinfo="goods" @close="closeSku"></choose-sku>
		</block>
	</qh-page-view>
</template>

<script>
	var app = getApp().globalData;
	export default {
		data() {
			return {
				title: '',
				cur: 0,
				arrowDirection: '', //1价格从低到高  2价格从高到低
				showLoading: false,
				canLoad: true,
				page: 0,
				isScroll: true,
				topNum: 0,
				keyword: '',
				goodsList: [],
				isFocus: false,
				class_id: "",
				msg: '',
				goods_id_gather: "", //商家券适合的商品id 、会员优惠券指定分类，指定商品id集合
				coupon_type: '', //3商家券 4代金券 5会员优惠券
				appoint_type: "", // 2会员优惠券指定分类 3会员优惠券指定商品
				memProClass: [], //会员优惠券指定分类
				// ischecknum:1,//选择的商品数量
				// checkItem:{},//选中要加入购物车的产品
				// alertToggle:false,

				sku: {},
				goods: {}, //待选择规格的商品信息
				showSelectSku: false, //是否显示规格弹窗
				store_id: '', //改变之前的门店id
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: async function(options) {
			await this.$onLaunched;
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			console.log(options)
			if (options && (options.store_id)) {
				this.store_id = options.store_id;
				if (!this.$store.store_id) {
					this.$store.store_id = options.store_id;
				}
			} else {
				this.store_id = this.$store.store_id
			}
			this.title = options.class_name && options.id ? options.class_name : '商品列表';

			if (options.class_name && options.id) {
				this.setData({
					class_id: options.id
				});
			}
			if (options.coupon_type && options.goods_id_gather) {
				this.goods_id_gather = options.goods_id_gather;
				this.coupon_type = options.coupon_type;
				if (options.appoint_type && options.appoint_type == 2) {
					//appoint_type == 2会员优惠券部分分类，appoint_type == 3 会员优惠券部分商品
					this.appoint_type = options.appoint_type
					this.getMemClass();
				} else {
					this.getgoods();
				}

			} else if (!options.type) {
				this.getgoods();
			} else {
				this.setData({
					isFocus: true
				});
			}
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.setData({
				canLoad: true,
				page: 0,
				showLoading: false,
				keyword: ''
			});
			this.getgoods();
		},
		onShareAppMessage(res) {
			return {
				title: '商品列表',
				path: '/pages/product/productList/productList?store_id=' + this.store_id + '&share_uid=' + app.XcxData.userInfo.uid,
			};
		},

		methods: {
			changeSort() {
				this.cur = 2;
				this.search();
			},
			inputSearch: function(e) {
				this.setData({
					keyword: e.detail.value
				});
			},
			search: function() {
				this.setData({
					canLoad: true,
					page: 0,
					showLoading: false
				});
				this.getgoods();
			},
			select(cur) {
				var arrowDirection = this.arrowDirection;
				var oldcur = this.cur;
				this.setData({
					cur: cur
				});

				if (cur == 2) {
					oldcur = -1;

					if (arrowDirection == 2) {
						//价格高
						this.setData({
							arrowDirection: 1
						});
					} else if (arrowDirection == 1) {
						//价格低
						this.setData({
							arrowDirection: 2
						});
					}
				} else {
					this.arrowDirection = '';
				}
				if (cur != oldcur) {
					this.setData({
						page: 0,
						goodsList: [],
						topNum: 0,
						canLoad: true
					});
					this.getgoods();
				}
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + id
				});
			},
			//公共方法 
			getgoods: function(_type) {
				var that = this;

				if (this.canLoad) {
					this.setData({
						showLoading: true,
						canLoad: false
					});
					var cur = this.cur;

					if (cur == 2) {
						if (that.arrowDirection == 2) {
							//价格高
							var num = 4;
						} else if (that.arrowDirection == 1) {
							var num = 3;
						}
					} else if (cur == 0) {
						var num = 0;
					} else if (cur == 1) {
						//最新
						var num = 2;
					} else if (cur == 3) {
						//销量
						var num = 5;
					}
					var page = this.page;
					let data = {};
					data['type'] = num;

					data['class_id'] = that.class_id ? that.class_id : 0
					data['page'] = page + 1;
					data['search'] = that.keyword;
					data['goods_id_gather'] = that.goods_id_gather;
					if (that.coupon_type) {
						console.log("that.coupon_type && that.goods_id_gather")
						data['coupon_type'] = that.coupon_type;
						console.log('data', data)
					}
					data.store_id = that.store_id

					console.log('data', data)
					getApp().globalData.sendRequest({
						url: '/Goods/goodsStatic_v1',
						type: "post",
						showLoading: false,
						data: data,
						success: function(res) {
							// console.log(res);
							that.setData({
								msg: res.msg
							})
							if (res.status == 1) {
								var canLoad = true;

								if (res.goods.length < res.count) {
									canLoad = false;
								}

								var goodsList = that.goodsList;

								if (page == 0) {
									goodsList = res.goods;
								} else {
									var goods = res.goods;
									goodsList.push.apply(goodsList, goods);
								}
								that.page++
								that.goodsList = goodsList
								that.canLoad = canLoad
								that.showLoading = false
							} else {

								that.setData({
									showLoading: false,
									goodsList: [],
									canLoad: false
								});
							}
						}
					});
				}
			},
			addMore: function() {
				this.getgoods();
			},
			//获取会员优惠券-指定分类的分类列表
			getMemClass() {
				let that = this;
				getApp().globalData.sendRequest({
					url: '/Goods/getClassList',
					type: "post",
					showLoading: false,
					data: {
						class_id_str: this.goods_id_gather
					},
					success: (res) => {
						// console.log(res);
						if (res.status == 1) {
							this.memProClass = res.data;
							this.class_id = res.data[0].class_id
							this.getgoods()
						} else {


						}

					}
				});
			},
			//切换分类
			checkClass(class_id) {
				console.log('class_id', class_id)
				this.class_id = class_id;
				this.canLoad = true;
				this.page = 0;
				this.goodsList = [],
					this.topNum = 0,
					this.getgoods()
			},

			//点击添加购物车
			async addToCar(index) {
				if (this.goodsList[index].attribute_state == 2) {
					this.sku.shoppingNum = 1;
					this.goods = {
						...this.goodsList[index],
						goods_id: this.goodsList[index].id,
						id: null,
					};
					this.showSelectSku = true;
				} else {
					const res = await this.$mutations.setShoppingCar({
						goods_id: this.goodsList[index].id,
						num: 1,
						goods_type: 2,
					})
				}
			},
			//组件上绑定的方法
			closeSku(data) {
				this.showSelectSku = false;
			},
			// 展示plus会员价条件
			showPlusPrice(item) {
				return app.showPlusPrice(item)
			},

			// 展示会员价条件
			showVipPrice(item) {
				return app.showVipPrice(item)
			},

			// 展示普通价格
			showOnlinePrice(item) {
				return app.showOnlinePrice(item)
			}
		}
	};
</script>
<style lang="scss">
	@import "./productList.css";

	.scroll-view {
		background: #F2F3F5;

		.scroll-view-content {
			padding: 0 20rpx;
			box-sizing: border-box;
			align-items: flex-start;
		}
	}

	.home-add-icon {
		font-size: 36rpx;
		padding: 18rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		color: var(--primary-color);
	}

	.viewa2 {
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 60rpx;
	}

	.viewa2-list {
		font-size: 28rpx;
		color: #999;
		margin-right: 30rpx;
		position: relative;


	}

	.actived {
		color: #333;
	}

	.actived::after {
		content: "";
		width: 40rpx;
		height: 4rpx;
		background-color: #ff5c6d;
		position: absolute;
		bottom: -8rpx;
		left: calc(50% - 20rpx)
	}

	.top2 {
		top: 244rpx;
	}
</style>
